<template>
  <form @submit="onSubmit">
    邮箱: <br>
    <input type="email" v-model="email" v-bind="emailAttrs">
    <div>{{ errors.email }}</div>
    密码: <br>
    <input type="password" v-model="password" v-bind="passwordAttrs">
    <div>{{ errors.password }}</div>
    确认密码: <br>
    <input type="password2" v-model="password2" v-bind="password2Attrs">
    <div>{{ errors.password2 }}</div>
    <button>submit</button>
  </form>
</template>

<script setup>
import { useForm } from 'vee-validate';
import * as yup from 'yup'


const schema = yup.object({
  email: yup.string().email().required('请输入email'),
  password: yup.string().min(6).required('请输入密码'),
  password2: yup.string().required('请再次输入密码').test('confirm-password','密码不一致', (value) => {
    // console.log(value)
    // console.log(password)
    if(value === password.value) {
      return true
    } else {
      return false
    }
  })
})

const { handleSubmit, errors, defineField, resetForm } = useForm({
  validationSchema: schema
})

const [email, emailAttrs] = defineField('email')
const [password, passwordAttrs ] = defineField('password')
const [password2, password2Attrs ] = defineField('password2')
const onSubmit = handleSubmit(values => {
  console.log(values)
  alert('提交成功')
  resetForm()
})
</script>